<!-- 工期预警表单面板 -->
<template>
  <div class="WarningFormCard">
    <title-name title="工期预警信息" />
    <a-form-model
      ref="warningform"
      layout="horizontal"
      :model="form"
      :rules="rules"
      class="requiredFormItem"
    >
      <a-row :gutter="24">
        <a-col
          :md="16"
          :sm="16"
        >
          <a-form-model-item
            prop="projectId"
            label="所属单位"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <org-tree-select
              :disabled="formType == 'disable'"
              is-need-auth
              check-strictly
              is-auto-select-first
              v-model="form.projectId"
              @select="selectOrg"
              @getProjectInfo="getProjectInfo"
            />
          </a-form-model-item>
        </a-col>
        <!--        <a-col :md="8" :sm="8">-->
        <!--          <a-form-model-item-->
        <!--            prop="branchId"-->
        <!--            label="分公司"-->
        <!--            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
        <!--            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
        <!--          >-->
        <!--            <SelectSubCompany-->
        <!--              :disabled="formType == 'disable'"-->
        <!--              v-model="form.branchId"-->
        <!--              ref="SelectSubCompany"-->
        <!--              placeholder="请选择"-->
        <!--              @change="changeSelectSubCompany"-->
        <!--            />-->
        <!--          </a-form-model-item>-->
        <!--        </a-col>-->
        <!--        <a-col :md="8" :sm="8">-->
        <!--          <a-form-model-item-->
        <!--            label="项目名称"-->
        <!--            prop="projectId"-->
        <!--            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
        <!--            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
        <!--          >-->
        <!--            <BaseInput v-if="formType == 'disable'" v-model="form.projectName" placeholder="" disabled />-->
        <!--            <SelectProject-->
        <!--              v-else-->
        <!--              v-model="form.projectId"-->
        <!--              placeholder="请选择"-->
        <!--              :form="form"-->
        <!--              :is-clear="true"-->
        <!--              :disabled="formType == 'disable'"-->
        <!--              ref="projectDom"-->
        <!--              key-value="branchId"-->
        <!--              @change="getManagerNameReq"-->
        <!--              @projectNum="projectNums"-->
        <!--              @pmIdHandler="pmIdHandler"-->
        <!--            />-->
        <!--          </a-form-model-item>-->
        <!--        </a-col>-->
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="项目编号"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="form.projectCode"
              placeholder=""
              disabled
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="24"
          :sm="24"
        >
          <a-form-model-item
            label="项目基本情况"
            prop="basicInfo"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseTextarea
              v-model="form.basicInfo"
              :disabled="formType == 'disable'"
              placeholder="请输入"
              :max-length="1000"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="24"
          :sm="24"
        >
          <a-form-model-item
            label="工期预警信息"
            prop="warnInfo"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseTextarea
              v-model="form.warnInfo"
              :disabled="formType == 'disable'"
              placeholder="请输入"
              :max-length="1000"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="预警级别"
            prop="warnLevel"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <!-- <div class="warning-level"> -->
            <a-select
              v-model="form.warnLevel"
              :disabled="formType == 'disable'"
              placeholder="请选择"
              @change="handleChange"
            >
              <a-select-option
                v-for="(item, index) in warningArr"
                :key="index"
                :value="item.value"
              >
                {{
                  item.label
                }}
              </a-select-option>
            </a-select>
            <!-- </div> -->
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="接收单位"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="form.projectName"
              placeholder="带出所选项目名称，不可修改"
              disabled
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="接收人"
            prop="recipientId"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <!-- <div class="recipient-box"> -->
            <a-select
              v-model="form.recipientId"
              :disabled="formType == 'disable'"
              allow-clear
              show-search
              option-filter-prop="label"
              placeholder="请选择"
              option-label-prop="label"
              @change="changeEmployeeName"
            >
              <a-icon
                v-if="fetching"
                slot="suffixIcon"
                style="color: #096dd9"
                type="loading"
              />
              <a-spin
                v-if="fetching"
                slot="notFoundContent"
                size="small"
              />
              <template v-else>
                <a-select-option
                  v-for="item in memberList"
                  :key="item.employeeId"
                  :value="item.employeeId"
                  :label="item.name"
                >
                  <a-tooltip
                    placement="topLeft"
                    :mouse-leave-delay="0"
                  >
                    <template slot="title">
                      {{ item.jobNum }}
                    </template>
                    <div>{{ item.name }}({{ item.phone }})</div>
                  </a-tooltip>
                </a-select-option>
              </template>
            </a-select>
            <!-- </div> -->
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="检查人"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="form.creatorName"
              placeholder="带出所选项目名称，不可修改"
              disabled
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-model-item
            label="检查时间"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="form.createTime"
              placeholder=""
              disabled
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="24"
          :sm="24"
        >
          <a-form-model-item
            class="feedbacks"
            label="附件"
            prop="fileInfos"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <l-table
              count="5"
              :is-close="formType !== 'disable'"
              business-code="PM35"
              :upload-arrys.sync="form.fileInfoList"
              :need-chinese-name="true"
              error-tips="附件名称中必须含有中文"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- <person-list ref="personList" :other-data="{ rootOrgId: form.recipientId }" @getPerson="getPerson" /> -->
  </div>
</template>

<script>
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/SelectProjects/SelectProject' // 项目

import { warningArr } from '../model.js'

import { getManagerName } from '@/api/project/pointsRecord'
import { getOrganizeUserList, getOrganizePeopleList, getOrganizeUserListQuick } from '@/api/commons'
import { getProjectCycleEarlyWarnByProjectId } from '@/api/project/warning'
import { getAuditProject } from '@/api/themeChoose/themeChoose'
export default {
  name: 'WarningFormCard',
  props: {
    form: Object,
    rules: {
      type: Object,
      default() {
        return {}
      }
    },
    // 表单是否可以编辑 disable：不可以 edit 可以编辑
    formType: {
      type: String,
      default: 'edit'
    }
  },
  data() {
    return {
      // 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索,否则为value
      optionFilterProp: {
        type: String,
        default: () => 'children'
      },
      fetching: false,
      warningArr,
      memberList: [] // 接收人
    }
  },

  components: { SelectSubCompany, SelectProject },

  watch: {
    'form.projectId': {
      handler(val) {
        val && (this.getImplees({}) || this.getProjectCycleEarlyWarnByProjectId(val))
      },
      immediate: true
    }
  },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    selectOrg(val) {
      if(val&&val.length) {
        this.form.projectId = val[val.length - 1].projectId
        this.form.branchId = val[val.length - 2].orgId
        this.form.branchName = val[val.length - 2].orgName
        this.$refs.warningform.clearValidate(['projectId'])
      }
    },
    getProjectInfo(val) {
      this.form.projectCode = val.projectNum
      this.form.projectName = val.projectName
      this.formType != 'disable' && this.getImplees({ pmId: val.realityPmId, pmName: val.realityPmName })
      this.$forceUpdate()
    },
    // 根据项目id查询最新一条工期预警信息
    getProjectCycleEarlyWarnByProjectId(id) {
      if (this.formType === 'disable') return
      getProjectCycleEarlyWarnByProjectId({ id }).then((res) => {
        this.form.basicInfo === '' &&
          (this.form.basicInfo = res.data.basicInfo) &&
          this.$refs.warningform.clearValidate(['basicInfo'])
      })
    },
    // 获取接收人姓名
    changeEmployeeName(id) {
      id && (this.form.recipientName = this.memberList.filter((v) => v.employeeId === id)[0].name)
    },
    // 获取分公司的名字
    changeSelectSubCompany(val = '') {
      const { company } = this.$refs.SelectSubCompany
      if (val !== '') {
        const { orgName } = company.filter((v) => v.orgId === val)[0]
        this.form.branchName = orgName
      }
    },
    // 获取接收人
    getImplees({ pmId, pmName }) {
      console.log(pmId,'pmId')
      this.fetching = true
      getOrganizeUserListQuick({ projectId: this.form.projectId }).then((res) => {
        const obj = {}
        // 去掉重复以及employeeId为空的数据
        res.data = res.data.reduce(function (item, next) {
          obj[next.employeeId] || !next.employeeId ? '' : (obj[next.employeeId] = true && item.push(next))
          return item
        }, [])
        this.memberList = res.data
        this.fetching = false
        this.$nextTick(() => {
          if (pmId && pmName) {
            this.form.recipientId = pmId
            console.log(this.form.recipientId,'this.form.recipientId')
            this.form.recipientName = pmName
            this.$refs.warningform.clearValidate(['recipientId'])
          }
        })
      })
    },
    // 选择预警级别
    handleChange(val) {
      this.form.warnLevel = val
    },
    // 项目编号
    projectNums(val) {
      this.form.projectCode = val
    },
    // 获取项目经理
    getManagerNameReq(val) {
      this.form.projectName = this.$refs.projectDom.project.filter((v) => v.projectId === val)[0].projectName
    },
    pmIdHandler({ pmId, pmName }) {
      this.getImplees({ pmId, pmName })
    }
  }
}
</script>
<style lang='less' scoped>
</style>
